<template>
  <div class="chat_box_2">
    <dv-border-box-7 :color="['#2EC8ED', '#2EC8ED']">
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="客户层次" />
        <div class="chat_box_content flex">
          <div id="chat3" class="flex-1 chat_box_item" />
          <div id="chat4" class="flex-1 chat_box_item" />
        </div>
      </template>
    </dv-border-box-7>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleBox from "./title_box.vue";
export default {
  components: { TitleBox },

  data() {
    return {
      loading: false,
      educationData: [],
      levelData: [],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      // try {
      //   this.loading = true;
      //   const { data } = await reqChartData2();
      //   this.loading = false;
      //   this.educationData = data.education;
      //   this.levelData = data.level;
      //   this.$nextTick(() => {
      //     this.initChart1();
      //     this.initChart2();
      //   });
      // } catch (error) {
      //   this.loading = false;
      // }

      this.$nextTick(() => {
        this.initChart1();
        this.initChart2();
      });
    },

    initChart1() {
      var myChart = echarts.init(document.getElementById("chat3"));
      const options = {
        color: ["#8CF7C9", "#0F95F1", "#9B60FA", "#8CF7C9", "#9B60FA", "#9B60FA"],

        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c} ({d}%)",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },
        title: {
          show: true,
          text: "年龄段",
          textStyle: {
            color: "#fff",
          },
          left: "center",
          top: "center",
        },
        series: [
          {
            name: "年龄段",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "70%"],
            labelLine: {
              show: false,
              smooth: true,
              length: 10,
              length2: 5,
              minTurnAngle: 60,
              lineStyle: {
                cap: "round",
              },
            },
            label: {
              color: "#fff",
              show: false,
            },
            data: [
              { value: 1048, name: "0-18岁" },
              { value: 335, name: "18-30岁" },
              { value: 310, name: "30-40岁" },
              { value: 251, name: "40-50岁" },
              { value: 234, name: "50岁以上" },
            ],
          },
        ],
      };

      myChart.setOption(options);
    },

    initChart2() {
      var myChart = echarts.init(document.getElementById("chat4"));
      const options = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c} ({d}%)",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },
        title: {
          show: true,
          text: "学历",
          textStyle: {
            color: "#fff",
          },
          left: "center",
          top: "center",
        },
        series: [
          {
            center: ["50%", "50%"],
            name: "学历",
            type: "pie",
            radius: ["50%", "70%"],
            selectedMode: "single",
            left: 0,
            top: 0,
            label: {
              show: false,
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "初中" },
              { value: 775, name: "高中" },
              { value: 1775, name: "大专" },
              { value: 1775, name: "本科" },
              { value: 1775, name: "研究生" },
              { value: 1775, name: "硕士" },
              { value: 1775, name: "博士" },
            ],
          },
        ],
      };

      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_2 {
  z-index: 99;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;

  left: 2vw;
  top: 34vh;
  width: 28%;
  height: 28vh;

  .chat_box_content {
    width: 100%;
    display: flex;
    height: calc(28vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }
}
</style>
